import {
  StyleSheet,
  View,
  Image,
  Text,
  TouchableHighlight,
  Dimensions,
  Animated
} from 'react-native';
import React, { Component } from 'react'

import TabBarItem from './TabBarItem';

export default class TabBar extends Component {

  static Item = TabBarItem;

  static defaultProps = {
    defaultPage: 0,
  };

  static propTypes = {
    ...View.propTypes,
    style: View.propTypes.style,
    defaultPage: React.PropTypes.number,
    onItemSelected: React.PropTypes.func,
  };

  constructor(props) {
    super(props);
    this.visibles = [];
    this.state = {
      selectedIndex: 0,
    }
  }

  update(index) {
    this.visibles[index] = true;
    this.setState({
      selectedIndex: index,
    });

    if (this.props.onItemSelected) {
      this.props.onItemSelected(index);
    }
  }
  componentDidMount() {
    let page = this.props.defaultPage;

    if (page >= this.props.children.length || page < 0) {
      page = 0;
    }

    this.update(page);
  }

  render() {
    let children = this.props.children;
    if (!children.length) {
      throw new Error("at least two child component are needed.");
    }

    // 底部tab按钮组
    let navs = [];
    const contentViews = children.map(
      (child, i) => {
        const imgSrc = this.state.selectedIndex == i ? child.props.selectedIcon : child.props.icon;
        navs[i] = (
          <TouchableHighlight
            key={i}
            underlayColor={'transparent'}
            style={styles.navItem}
            onPress={() => {
              if (child.props.onPress) {
                child.props.onPress();
              }
              this.update(i);
            }}>
            <Image style={styles.navImage} resizeMode='cover' source={imgSrc} />
          </TouchableHighlight>
        );

        if (!this.visibles[i]) {
          return null;
        } else {
          const style = this.state.selectedIndex === i ? styles.base : [styles.base, styles.gone];
          return (
            <View
              key={'view_' + i}
              style={style}>
              {child}
            </View>
          );
        }
      }
    );

    return (
      <View style={[styles.container, this.props.style]}>
        <View style={styles.horizonLine} />
        <Animated.View style={styles.nav}>
          {navs}
        </Animated.View>
      </View>
    )
  }
}

const styles = StyleSheet.create({
  container: {
    position: 'absolute',
    bottom: 0,
    right: 0,
    left: 0,
    opacity: 1,
    backgroundColor: 'white',
    width: Dimensions.get('window').width,
    overflow: 'hidden',
  },
  content: {
    flex: 1
  },
  base: {
    position: 'absolute',
    overflow: 'hidden',
    left: 0,
    right: 0,
    top: 0,
    bottom: 0,
  },
  gone: {
    top: Dimensions.get('window').height,
    bottom: -Dimensions.get('window').height,
  },
  nav: {
    flexDirection: 'row',
    width: Dimensions.get('window').width,
  },
  navItem: {
    flex: 1,
    paddingTop: 6,
    paddingBottom: 6,
    alignItems: 'center',
  },
  center: {
    width: 56,
    alignItems: 'center',
    justifyContent: 'center',
  },
  navImage: {
    width: 45,
    height: 45,
    marginBottom: 2,
    alignSelf: 'center'
  },
  horizonLine: {
    backgroundColor: '#adadad',
    height: 0.5,
    width: Dimensions.get('window').width,
  },
});